<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ciyt List Page</h1>
        <table id="city-table">

        </table>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/table.js"></script>
    <script>
        var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
        $(function(){ //页面加载完成以后执行
            doInit("city-table",cityColumns);//创建thead,tbody
            doLoadCitys();
        })
        function doLoadCitys(){
            $.ajax({
                url:"/doAjaxGet",
                success:function(result){
                    doSetTableBodyRows($("#city-table>tbody"),result);
                }
            });
        }
        function doSetTableBodyRows(tBody,result){
                // let tBody=$("#city-table").find("tbody");
            tBody.empty();
                // for (let i =0;i<result.length;i++){
                //     tBody.append(doCreateRow(result[i]));
                // }
            //方法2
            //  result.forEach(function(item) {
            //      tBody.append(doCreateRow(item));
            //  })
            //  result.forEach(function (item){
            //      tBody.append(doCreateRow(item));
            //  });
            //方法3
            result.forEach(item=>tBody.append(doCreateRow(item)));
            // result.forEach(item=>tBody.append(doCreateRow(item)));
        }
        function doCreateRow(row){
            return`<tr>
                       <td>${row.id}</td>
                       <td>${row.city}</td>
                       <td><a href='javascript:doDeleteById(${row.id})'>delete</td>
                   </tr>`
        }
        function doDeleteById(id){
            $.ajax({
                method:"delete",
                url:`/doAjaxDelete/${id}`,
                success:function (result){
                    alert(result);
                    doLoadCitys();
                }
            })
        }
    </script>
</body>
</html>


